Vormide kasutajakogemuse täiustamine: dünaamilise täituvusprotsendi indikaatori loomine Reacti useFormStatus'i abil

Veebiarenduse maailmas on vormid kriitiline ristumiskoht, kus kasutajad ja rakendused vahetavad teavet. Halvasti disainitud vorm võib olla peamine takistus, mis põhjustab kasutajate frustratsiooni ja kõrgeid poolelijätmise määrasid. Vastupidi, hästi läbimõeldud vorm on intuitiivne, abistav ja julgustab täitmist. Üks tõhusamaid vahendeid meie kasutajakogemuse (UX) tööriistakastis selle saavutamiseks on reaalajas edenemisindikaator.

See juhend viib teid sügavuti dünaamilise vormi täituvusprotsendi indikaatori loomiseni Reactis. Uurime, kuidas jälgida kasutaja sisestust reaalajas ja, mis kõige tähtsam, kuidas seda integreerida kaasaegsete Reacti funktsioonidega nagu useFormStatus hook, et pakkuda sujuvat kogemust alates esimesest klahvivajutusest kuni lõpliku esitamiseni. Olenemata sellest, kas loote lihtsat kontaktivormi või keerulist mitmeastmelist registreerimisprotsessi, aitavad siin käsitletud põhimõtted luua kaasavama ja kasutajasõbralikuma liidese.

Põhimõistete mõistmine

Enne ehitama asumist on oluline mõista kaasaegseid Reacti kontseptsioone, mis on meie lahenduse aluseks. useFormStatus hook on lahutamatult seotud React Server Components'i ja Server Actions'itega, mis on paradigma muutus selles, kuidas me käsitleme andmete muutmist ja serveriga suhtlemist.

Lühiülevaade React Server Actions'itest

Traditsiooniliselt hõlmas vormide esitamise käsitlemine Reactis kliendipoolset JavaScripti. Me kirjutasime onSubmit käsitleja, takistasime vormi vaikekäitumist, kogusime andmed (sageli useState'iga) ja tegime seejärel API-päringu kasutades fetch'i või mõnda teeki nagu Axios. See muster töötab, kuid see hõlmab palju korduvat koodi.

Server Actions muudavad selle protsessi sujuvamaks. Need on funktsioonid, mida saate määratleda serveris (või kliendis 'use server' direktiiviga) ja anda otse vormi action prop'ile. Kui vorm esitatakse, tegeleb React automaatselt andmete serialiseerimise ja API-kõnega, käivitades serveripoolse loogika. See lihtsustab kliendipoolset koodi ja paigutab muutmisloogika samasse kohta komponentidega, mis seda kasutavad.

useFormStatus hook'i tutvustus

Kui vormi esitamine on pooleli, on vaja kasutajale tagasisidet anda. Kas päringut saadetakse? Kas see õnnestus? Kas see ebaõnnestus? Just selleks ongi useFormStatus mõeldud.

useFormStatus hook annab olekuteavet vanema <form> viimase esitamise kohta. See tagastab objekti järgmiste omadustega:

• pending: Tõeväärtus, mis on true, kui vormi aktiivselt esitatakse, ja muul ajal false. See sobib ideaalselt nuppude keelamiseks või laadimisindikaatorite kuvamiseks.
• data: FormData objekt, mis sisaldab esitatud andmeid. See on äärmiselt kasulik optimistlike kasutajaliidese uuenduste rakendamiseks.
• method: Sõne, mis näitab esitamiseks kasutatud HTTP-meetodit (nt 'GET' või 'POST').
• action: Viide funktsioonile, mis anti vormi action prop'ile.

Oluline reegel: useFormStatus hook'i tuleb kasutada komponendis, mis on <form> elemendi järeltulija. Seda ei saa kasutada samas komponendis, mis renderdab <form> märgendit ennast; see peab olema alamkomponendis.

Väljakutse: reaalajas täitmine vs esitamise olek

Siin jõuame olulise eristuseni. useFormStatus hook on suurepärane mõistmaks, mis juhtub vormi esitamise ajal ja pärast seda. See annab teada, kas vorm on ootel ('pending').

Vormi täituvusprotsendi indikaator aga puudutab vormi olekut enne esitamist. See vastab kasutaja küsimusele: "Kui suure osa sellest vormist olen ma seni õigesti täitnud?" See on kliendipoolne ülesanne, mis peab reageerima igale klahvivajutusele, klikile või valikule, mida kasutaja teeb.

Seetõttu koosneb meie lahendus kahest osast:

1. Kliendipoolne olekuhaldus: Kasutame standardseid Reacti hook'e nagu useState ja useMemo, et jälgida vormivälju ja arvutada täituvusprotsenti reaalajas.
2. Esitamise olekuhaldus: Seejärel kasutame useFormStatus'i, et parandada kasutajakogemust tegeliku esitamisprotsessi ajal, luues kasutajale täieliku, otsast lõpuni tagasiside ahela.

Samm-sammuline teostus: edenemisriba komponendi loomine

Lähme praktiliseks ja loome kasutaja registreerimisvormi, mis sisaldab nime, e-posti, riiki ja teenusetingimustega nõustumist. Lisame edenemisriba, mis uueneb vastavalt sellele, kuidas kasutaja välju täidab.

1. samm: vormi struktuuri ja oleku määratlemine

Esmalt seadistame oma põhikomponendi vormiväljadega ja haldame nende olekut useState'i abil. See olekuobjekt on meie vormi andmete jaoks ainus tõe allikas.

            
// Oma Reacti komponendi failis, nt RegistrationForm.js
'use client'; // Vajalik hook'ide nagu useState kasutamiseks

import React, { useState, useMemo } from 'react';

const initialFormData = {
  fullName: '',
  email: '',
  country: '',
  agreedToTerms: false,
};

export default function RegistrationForm() {
  const [formData, setFormData] = useState(initialFormData);

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prevData => ({
      ...prevData,
      [name]: type === 'checkbox' ? checked : value,
    }));
  };

  // ... arvutusloogika ja JSX tulevad siia

  return (
    <form className="form-container">
      <h2>Looge oma konto</h2>
      
      {/* Edenemisriba lisatakse siia */}

      <div className="form-group">
        <label htmlFor="fullName">Täisnimi</label>
        <input
          type="text"
          id="fullName"
          name="fullName"
          value={formData.fullName}
          onChange={handleInputChange}
          required
        />
      </div>

      <div className="form-group">
        <label htmlFor="email">E-posti aadress</label>
        <input
          type="email"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          required
        />
      </div>

      <div className="form-group">
        <label htmlFor="country">Riik</label>
        <select
          id="country"
          name="country"
          value={formData.country}
          onChange={handleInputChange}
          required
        >
          <option value="">Valige riik</option>
          <option value="USA">Ameerika Ühendriigid</option>
          <option value="CAN">Kanada</option>
          <option value="GBR">Ühendkuningriik</option>
          <option value="AUS">Austraalia</option>
          <option value="IND">India</option>
        </select>
      </div>

      <div className="form-group-checkbox">
        <input
          type="checkbox"
          id="agreedToTerms"
          name="agreedToTerms"
          checked={formData.agreedToTerms}
          onChange={handleInputChange}
          required
        />
        <label htmlFor="agreedToTerms">Nõustun tingimustega</label>
      </div>

      {/* Esitamisnupp lisatakse hiljem */}
    </form>
  );
}

            

              
                Copy
              
            
          

2. samm: täituvusprotsendi arvutamise loogika

Nüüd põhilise loogika juurde. Peame määratlema, mida "täidetud" iga välja puhul tähendab. Meie vormi jaoks on reeglid järgmised:

• Täisnimi: Ei tohi olla tühi.
• E-post: Peab olema kehtivas e-posti vormingus (kasutame lihtsat regulaaravaldist).
• Riik: Peab olema valitud väärtus (ei tohi olla tühi string).
• Tingimused: Märkeruut peab olema märgitud.

Loome funktsiooni selle loogika kapseldamiseks ja mähime selle useMemo sisse. See on jõudluse optimeerimine, mis tagab, et arvutus käivitatakse uuesti ainult siis, kui formData, millest see sõltub, on muutunud.

            
// RegistrationForm komponendi sees

const completionPercentage = useMemo(() => {
  const fields = [
    {
      key: 'fullName',
      isValid: (value) => value.trim() !== '',
    },
    {
      key: 'email',
      isValid: (value) => /^\S+@\S+\.\S+$/.test(value),
    },
    {
      key: 'country',
      isValid: (value) => value !== '',
    },
    {
      key: 'agreedToTerms',
      isValid: (value) => value === true,
    },
  ];

  const totalFields = fields.length;
  let completedFields = 0;

  fields.forEach(field => {
    if (field.isValid(formData[field.key])) {
      completedFields++;
    }
  });

  return Math.round((completedFields / totalFields) * 100);
}, [formData]);

            

              
                Copy
              
            
          

See useMemo hook annab meile nüüd completionPercentage muutuja, mis on alati vormi täitmise olekuga ajakohane.

3. samm: dünaamilise edenemisriba kasutajaliidese loomine

Loome korduvkasutatava ProgressBar komponendi. See võtab arvutatud protsendi prop'ina ja kuvab seda visuaalselt.

            
// ProgressBar.js
import React from 'react';

export default function ProgressBar({ percentage }) {
  return (
    <div className="progress-container">
      <div className="progress-bar" style={{ width: `${percentage}%` }}>
        <span className="progress-label">{percentage}% Täidetud</span>
      </div>
    </div>
  );
}

            

              
                Copy
              
            
          

Ja siin on mõned põhilised CSS-stiilid, et see hea välja näeks. Saate selle lisada oma globaalsesse stiililehte.

            
/* styles.css */
.progress-container {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.progress-bar {
  height: 24px;
  background-color: #4CAF50; /* Kena roheline värv */
  text-align: right;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.5s ease-in-out;
}

.progress-label {
  padding: 5px;
  font-weight: bold;
  font-size: 14px;
}

            

              
                Copy
              
            
          

4. samm: kõige kokku integreerimine

Nüüd impordime ja kasutame oma ProgressBar komponenti peamises RegistrationForm komponendis.

            
// Failis RegistrationForm.js

import ProgressBar from './ProgressBar'; // Kohanda impordi asukohta

// ... (RegistrationForm'i return-lause sees)
return (
  <form className="form-container">
    <h2>Looge oma konto</h2>

    <ProgressBar percentage={completionPercentage} />

    {/* ... ülejäänud vormiväljad ... */}
  </form>
);

            

              
                Copy
              
            
          

Kui see on paigas, näete vormi täites, kuidas edenemisriba sujuvalt 0%-lt 100%-ni animeerub. Oleme edukalt lahendanud oma probleemi esimese poole: reaalajas tagasiside andmise vormi täitmise kohta.

Kuhu sobib useFormStatus: esitamiskogemuse täiustamine

Vorm on 100% täidetud, edenemisriba on täis ja kasutaja klõpsab "Esita". Mis nüüd juhtub? Siin tulebki mängu useFormStatus'i sära, mis võimaldab meil anda selget tagasisidet andmete esitamise protsessi ajal.

Esmalt määratleme Server Action'i, mis tegeleb meie vormi esitamisega. Selle näite puhul simuleerib see lihtsalt võrguviivitust.

            
// Uues failis, nt 'actions.js'
'use server';

// Simuleeri võrguviivitust ja töötle vormiandmeid
export async function createUser(formData) {
  console.log('Server Action sai andmed:', formData.get('fullName'));
  
  // Simuleeri andmebaasipäringut või muud asünkroonset operatsiooni
  await new Promise(resolve => setTimeout(resolve, 2000));

  // Reaalses rakenduses käsitleksite edu/vea olekuid
  console.log('Kasutaja loomine õnnestus!');
  // Võiksite kasutaja ümber suunata või tagastada eduteate
}

            

              
                Copy
              
            
          

Järgmiseks loome spetsiaalse SubmitButton komponendi. Pidage meeles reeglit: useFormStatus peab olema vormi alamkomponendis.

            
// SubmitButton.js
'use client';

import { useFormStatus } from 'react-dom';

export default function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Konto loomisel...' : 'Loo konto'}
    </button>
  );
}

            

              
                Copy
              
            
          

See lihtne komponent teeb väga palju. See tellib automaatselt vormi oleku. Kui esitamine on pooleli (pending on tõene), keelab see end mitmekordsete esitamiste vältimiseks ja muudab oma teksti, et anda kasutajale teada, et midagi toimub.

Lõpuks uuendame oma RegistrationForm komponenti, et kasutada Server Action'it ja meie uut SubmitButton'it.

            
// Failis RegistrationForm.js
import { createUser } from './actions'; // Impordi serveriaktsioon
import SubmitButton from './SubmitButton'; // Impordi nupp

// ...

export default function RegistrationForm() {
  // ... (kogu olemasolev olek ja loogika)

  return (
    // Anna serveriaktsioon vormi 'action' prop'ile
    <form className="form-container" action={createUser}>
      <h2>Looge oma konto</h2>
      <ProgressBar percentage={completionPercentage} />

      {/* Kõik vormiväljad jäävad samaks */}
      {/* Märkus: 'name' atribuut igal sisendil on ülioluline */}
      {/* et Server Actions saaks luua FormData objekti. */}

      <div className="form-group">
        <label htmlFor="fullName">Täisnimi</label>
        <input name="fullName" ... />
      </div>
      {/* ... teised sisendid 'name' atribuutidega ... */}

      <SubmitButton />
    </form>
  );
}

            

              
                Copy
              
            
          

Nüüd on meil täielik ja kaasaegne vorm. Edenemisriba juhendab kasutajat selle täitmisel ja esitamisnupp annab selget ja ühemõttelist tagasisidet esitamisprotsessi ajal. See sünergia kliendipoolse oleku ja useFormStatus'i vahel loob robustse ja professionaalse kasutajakogemuse.

Täpsemad kontseptsioonid ja parimad praktikad

Keerulise valideerimise käsitlemine teekidega

Keerulisemate vormide puhul võib valideerimisloogika käsitsi kirjutamine muutuda tüütuks. Teegid nagu Zod või Yup võimaldavad teil määratleda oma andmetele skeemi, mida saab seejärel valideerimiseks kasutada.

Selle saate integreerida meie täituvuse arvutusse. Selle asemel, et kasutada iga välja jaoks kohandatud isValid funktsiooni, võiksite proovida iga välja parsida selle skeemi definitsiooni vastu ja lugeda kokku õnnestumised.

            
// Näide Zod'i kasutamisest (kontseptuaalne)
import { z } from 'zod';

const userSchema = z.object({
  fullName: z.string().min(1, 'Nimi on kohustuslik'),
  email: z.string().email(),
  country: z.string().min(1, 'Riik on kohustuslik'),
  agreedToTerms: z.literal(true, { message: 'Peate tingimustega nõustuma' }),
});

// Oma useMemo arvutuses:
const completedFields = Object.keys(formData).reduce((count, key) => {
  const fieldSchema = userSchema.shape[key];
  const result = fieldSchema.safeParse(formData[key]);
  return result.success ? count + 1 : count;
}, 0);

            

              
                Copy
              
            
          

Ligipääsetavuse (a11y) kaalutlused

Suurepärane kasutajakogemus on ligipääsetav. Meie edenemisindikaator peab olema arusaadav abitehnoloogiate, näiteks ekraanilugejate, kasutajatele.

Täiustage ProgressBar komponenti ARIA atribuutidega:

            
// Täiustatud ProgressBar.js
export default function ProgressBar({ percentage }) {
  return (
    <div
      role="progressbar"
      aria-valuenow={percentage}
      aria-valuemin="0"
      aria-valuemax="100"
      aria-label={`Vormi täituvus: ${percentage} protsenti`}
      className="progress-container"
    >
      {/* ... sisemine div ... */}
    </div>
  );
}

            

              
                Copy
              
            
          

• role="progressbar": Teavitab abitehnoloogiat, et see element on edenemisriba.
• aria-valuenow: Edastab praeguse väärtuse.
• aria-valuemin ja aria-valuemax: Määratlevad vahemiku.
• aria-label: Annab edenemise kohta inimloetava kirjelduse.

Levinumad lõksud ja kuidas neid vältida

1. useFormStatus'i kasutamine vales kohas: Kõige levinum viga. Pidage meeles, et seda hook'i kasutav komponent peab olema <form>'i alamkomponent. Esitamisnupu kapseldamine omaette komponenti on standardne ja õige muster.
2. name atribuutide unustamine sisenditel: Server Actions'ite kasutamisel on name atribuut vältimatu. Selle abil konstrueerib React FormData objekti, mis saadetakse serverisse. Ilma selleta ei saa teie serveriaktsioon andmeid kätte.
3. Kliendi- ja serveripoolse valideerimise segiajamine: Reaalajas täituvusprotsent põhineb kliendipoolsel valideerimisel kohese UX tagasiside saamiseks. Peate alati andmed uuesti valideerima serveris oma Server Action'i sees. Ärge kunagi usaldage kliendilt tulevaid andmeid.

Kokkuvõte

Oleme edukalt lahti võtnud keeruka ja kasutajasõbraliku vormi loomise protsessi kaasaegses Reactis. Mõistes kliendipoolse oleku ja useFormStatus hook'i erinevaid rolle, saame luua kogemusi, mis juhendavad kasutajaid, annavad selget tagasisidet ja lõppkokkuvõttes suurendavad konversioonimäärasid.

Siin on peamised järeldused:

• Reaalajas tagasisideks (enne esitamist): Kasutage kliendipoolset olekuhaldust (useState), et jälgida sisendi muudatusi ja arvutada täituvuse edenemist. Kasutage useMemo'd nende arvutuste optimeerimiseks.
• Esitamise tagasisideks (esitamise ajal/järel): Kasutage useFormStatus hook'i oma vormi alamkomponendis, et hallata kasutajaliidest ootel oleku ajal (nt nuppude keelamine, laadimisindikaatorite kuvamine).
• Sünergia on võtmetähtsusega: Nende kahe lähenemise kombinatsioon katab kasutaja vormiga suhtlemise kogu elutsükli, algusest lõpuni.
• Seadke ligipääsetavus alati esikohale: Kasutage ARIA atribuute, et tagada oma dünaamiliste komponentide kasutatavus kõigi jaoks.

Neid mustreid rakendades liigute kaugemale pelgalt andmete kogumisest ja hakkate kujundama vestlust oma kasutajatega – vestlust, mis on selge, julgustav ning austab nende aega ja vaeva.